<template>
    <div class="container mx-auto overflow-hidden">
        <ul class="flex gap-4">
            <li @click="scrollTo(fadeUp)" class="hover:text-green-500">Fade Up</li>
            <li @click="scrollTo(fadeRight)" class="hover:text-green-500">Fade Right</li>
            <li @click="scrollTo(flipLeft)" class="hover:text-green-500">Flip Left</li>
            <li @click="scrollTo(zoomIn)" class="hover:text-green-500">Zoom In</li>
        </ul>

        <div style="height: 200px"></div>
        <div data-aos="fade-up" ref="fadeUp" class="h-[100px] bg-green-200">Fade Up</div>
        <div style="height: 200px"></div>
        <div data-aos="fade-down" class="h-[100px] bg-green-200">Fade Down</div>
        <div style="height: 200px"></div>
        <div data-aos="fade-left" class="h-[100px] bg-green-200">Fade Left</div>
        <div style="height: 200px"></div>
        <div data-aos="fade-right" ref="fadeRight" class="h-[100px] bg-green-200">Fade Right</div>
        <div style="height: 200px"></div>
        <div data-aos="flip-left" ref="flipLeft" class="h-[100px] bg-green-200">Flip Left</div>
        <div style="height: 200px"></div>
        <div data-aos="zoom-in" ref="zoomIn" class="h-[100px] bg-green-200">Zoom In</div>
        <div style="height: 200px"></div>
    </div>
</template>

<script setup>
const { $aos } = useNuxtApp();
const flipLeft = ref(null);
const zoomIn = ref(null);
const fadeRight = ref(null);
const fadeUp = ref(null);

onMounted(() => {
    $aos().init();
});

const scrollTo = (el) => {
    el.scrollIntoView({ behavior: "smooth" });
};
</script>
